/*
  用法：
    <yl-input title="姓名" required placeholder="请输入姓名"></yl-input>
  Props
    title                 标题
    value                 内容
    placeholder           占位文字
    required              是否显示表单必填星号
    arrow                 箭头方向 right up down
    readonly              是否只读
    type                  文本类型-跟随系统
    maxlength             最大输入长度
    textalign             文字方向 right、left
    is-border             是否展示分割线
  Events
    input                 输入中
    focus                 获取焦点
    blur                  失去焦点
    confirm               点击完成
  Slot
    title                 自定义标题
  外部样式类
    无
*/
Component({
  externalClasses: ["cell-class"],
  options: {
    multipleSlots: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    // 标题
    title: {
      type: String,
      value: "",
    },
    // 内容
    value: {
      type: String,
      value: "",
      observer: "updateValue",
    },
    // 占位文字
    placeholder: {
      type: String,
      value: "请输入",
    },
    // 是否显示表单必填星号
    required: {
      type: Boolean,
      value: false,
    },
    //  箭头方向 right up down
    arrow: {
      type: String,
      value: "",
    },
    // 是否只读
    readonly: {
      type: Boolean,
      value: false,
    },
    /*
      文本类型
      text 文本输入框
      number 数字输入键盘
      idcard 身份证输入键盘
      digit 带小数点的数字键盘
      safe-password 密码安全输入键盘 指引。仅 Webview 支持。
      nickname 昵称输入键盘
    */
    type: {
      type: String,
      value: "text",
    },
    // 最大输入长度，设置为 -1的时候不限制最大长度，微信默认140
    maxlength: {
      type: Number,
      value: -1,
    },
    /*
      文字方向，默认右
      right 右
      left 左
    */
    textalign: {
      type: String,
      value: "right",
    },
    // 是否展示分割线
    isBorder: {
      type: Boolean,
      value: true,
    },
    isPadding: {
      type: Boolean,
      value: true,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    updateValue(val) {
      this.setData({
        value: val
      })
    },
    // 输入中
    onInput(event) {
      this.setData({
        value: event.detail.value,
      });
      this.triggerEvent("input", event.detail);
    },
    // 获取焦点
    onFocus(event) {
      this.triggerEvent("focus", event.detail);
    },
    // 失焦
    onBlur(event) {
      this.triggerEvent("blur", event.detail);
    },
    // 点击完成
    onConfirm(event) {
      this.triggerEvent("confirm", event.detail);
    },
  },
});
